<template>
    <div class="footer">
        <div class="title">
            <h1>剧照</h1>
            <p @click="openalbum">全部({{ photos.length }})</p>
        </div>
        <div class="list">
            <div @click="preview_poster(photo)" class="item" v-for="(photo, index) in photos" :key="index">
                <div class="cover">
                    <img :src="photo" alt="">
                </div>
            </div>
        </div>
        <mypreview ref="mypreview"></mypreview>
        <div class="fixed">选座购票</div>
    </div>
</template>

<script>
import Mypreview from '@/components/Mypreview.vue'
export default {
    components: { Mypreview },
    props: {
        photos: {
            type: Array,
            required: true
        }
    },
    methods: {
        preview_poster(_path) {
            this.$refs.mypreview.show_preview(_path)
        },
        openalbum() {
            this.$emit('openalbum')
        }
    },
}
</script>

<style lang="less" scoped>
@import "../../../assets/Less/common.less";

.footer {
    padding: 15px;

    .title {
        .flex(space-between);
        margin-bottom: 10px;

        h1 {
            font-weight: normal;
            font-size: @title_font_size;
            color: @text_color;
        }

        p {
            font-size: @normal_font_size;
            color: @gray_text_color;
        }
    }

    .list {
        margin-bottom: 50px;
        .flex(start);
        overflow-x: auto;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            margin-right: 10px;

            .cover {
                margin-bottom: 5px;
                width: 150px;
                height: 100px;
                overflow: hidden;
                .flex();

                img {
                    width: 100%;
                }
            }
        }
    }

    .fixed {
        .flex();
        width: 100%;
        height: 49px;
        .position(fixed, auto, 0, auto, 0);
        font-size: 20px;
        text-align: center;
        color: #fff;
        background-color: @main_color;
    }
}
</style>